<template>
	<van-cell clickable :title="componentModel.label" v-show="visible">
		<template #right-icon>
			<van-checkbox v-model="vue_model" ref="checkbox" :disabled="readonly" @change="onChangeHandler"/>
		</template>
	</van-cell>
</template>

<script>
	import {sendComponentValueChangeRequest} from '@/utils/requestUtils.js';
	import utils from '@/utils/utils.js';
	export default {
		name: "CheckboxComponent",
		props: ["componentModel", "scope"],
		data() {
			return {
				vue_model: "",
				readonly:false,
				label:"",
				visible:true,
			}
		},
		inject:['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			getValue() {
				return this.vue_model;
			},
			setProp(prop) {
				for (var k in prop) {
					if (k == "value") {
						if (prop[k] == "1" ||prop[k] ==true) {
							this.vue_model = true;
						} else {
							this.vue_model = false;
						}
					}else if(k=="readonly"){
						this.readonly=prop[k];
					}else if(k=="label"){
						this.label=prop[k];
					}else if(k=="visible"){
						this.visible=prop[k];
					}
				}
			},onChangeHandler() {
				if (this.scope != undefined) {
					this.$emit("onValueChange", this);
					return;
				}
				sendComponentValueChangeRequest(this);
			}
		}
	}
</script>

<style>
</style>
